<template>
  <el-dialog v-model="visible" title="号源排班" class="gap-col-1" style="width: 900px">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="出诊日期">
        {{ dayjs(clinicDate).format('YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="号别" :span="2">{{ clinicLabel }}</el-descriptions-item>
      <el-descriptions-item label="医生姓名">{{ data?.doctorName }}</el-descriptions-item>
      <el-descriptions-item label="科室">{{ data?.deptName }}</el-descriptions-item>
      <el-descriptions-item label="号类">{{ data?.clinicType }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <vxe-table
      ref="tableRef"
      :data="data?.days || []"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
      }"
    >
      <vxe-column title="序号" width="70" type="seq" fixed="left" />
      <vxe-column title="时间描述" width="160" field="timeDesc" :edit-render="{}" fixed="left">
        <template #edit="{ row }">
          <el-select v-if="row.editStatus" v-model="row.timeDesc" placeholder="Select">
            <el-option
              v-for="item in timeIntervals"
              :key="item.timeDesc"
              :label="item.timeDesc"
              :value="item.timeDesc"
            />
          </el-select>
          <span v-else>{{ row.timeDesc }}</span>
        </template>
      </vxe-column>
      <vxe-column title="总限号数" width="160" field="registerLimit" :edit-render="{}">
        <template #edit="{ row }">
          <el-input-number v-if="row.editStatus" v-model="row.registerLimit" :min="-1" />
          <span v-else>{{ row.registerLimit }}</span>
        </template>
      </vxe-column>
      <vxe-column title="总限约数" width="160" field="appointLimit" :edit-render="{}">
        <template #edit="{ row }">
          <el-input-number v-if="row.editStatus" v-model="row.appointLimit" :min="0" />
          <span v-else>{{ row.appointLimit }}</span>
        </template>
      </vxe-column>
      <vxe-column title="已挂号数" width="120" field="registerNum" />
      <vxe-column title="已预约数" width="120" field="appointNum" />
      <vxe-column title="当前号" width="120" field="currentNo" />
      <vxe-column title="操作" fixed="right" width="180">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="removeItem(row)">删除</el-button>
          <el-button size="small" @click="registerTjPoolRef.display(row.workId)">号源池</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <template #footer>
      <div class="flex flex-row flex-justify-between">
        <div>
          <el-button @click="addItem">新增</el-button>
          <el-button @click="save">保存</el-button>
        </div>
        <div>
          <el-button @click="refresh">刷新</el-button>
          <el-button type="danger" @click="visible = false">退出</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
  <RegisterTjPool ref="registerTjPoolRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, dayjs, ElMessageBox } from 'element-plus'
import type { VxeColumnPropTypes, VxeTableInstance } from 'vxe-table'
import type { RegisterScheduleDayRes, RegisterScheduleRes } from '@/api/register'
import { RegisterBusAPIs } from '@/api/register'
import { DictAPIs, EnumDictName } from '@/api/system/dict'
import type { TimeInterval } from '@/api/register/base'
import RegisterTjPool from './RegisterTjPool.vue'

const visible = ref(false)
const clinicLabel = ref('')
const clinicDate = ref(new Date())
const timeIntervals = ref<TimeInterval[]>()
const tableRef = ref<VxeTableInstance>()
const registerTjPoolRef = ref<any>()
const data = ref<RegisterScheduleRes | undefined>({
  days: [],
  clinicLabel: '',
  doctorId: '',
  doctorName: '',
  deptCode: '',
  deptName: '',
  addr: '',
  clinicType: '',
})

watch(visible, async val => {
  if (val) {
    refresh()

    timeIntervals.value = await DictAPIs.getData<TimeInterval>(EnumDictName.挂号时间描述字典)
  }
})

/**显示 */
function display(cLabel: string, cDate: Date) {
  visible.value = true
  clinicLabel.value = cLabel
  clinicDate.value = cDate
}

/**删除项目 */
function removeItem(row: RegisterScheduleDayRes) {
  const $table = tableRef.value
  if ($table) {
    $table.remove(data)
  }
}

/**新增项目 */
async function addItem() {
  const $table = tableRef.value
  if ($table) {
    const { row: newRow } = await $table.insert({
      editStatus: true,
      registerLimit: 200,
      registerNum: 0,
      appointLimit: 200,
      appointNum: 0,
      currentNo: 1,
    })

    // 激活不自动聚焦
    $table.setEditRow(newRow)
  }
}

/**保存 */
function save() {
  const $table = tableRef.value
  if ($table) {
    ElMessageBox.confirm('是否保存数据?', '系统提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage.success('保存成功')
      refresh()
    })
  }
}

/**号源池 */
function showPool(row: RegisterScheduleDayRes) {}

/**刷新 */
async function refresh() {
  data.value = await RegisterBusAPIs.getScheduleDay(clinicLabel.value, clinicDate.value)
}

defineExpose({
  display,
})
</script>

<style lang="scss" scoped></style>
